import React, { useRef,  } from 'react';
import { Row, Col,  Button,  } from 'antd';
import  {
  DrawerForm,
  ProFormTextArea,
  ProFormInstance,
} from '@ant-design/pro-form';
import type { ActionType,  ProColumns } from '@ant-design/pro-table';
import * as api from '@/services/ipBlacklist';
import { ProTable } from '@ant-design/pro-components';

type VpnServerFormProps = {
  visible: boolean;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel } = props;

  if (!visible) {
    return null;
  }
  const formRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();


  const loadData = async () => {
    let ips =formRef.current?.getFieldValue('ips');
    const result = await api.checkIpAreas({ips:ips});
    return result;
  };
  

  const columns: ProColumns<API.VpnServerOnlineIp>[] = [
    {
      title: 'IP',
      dataIndex: 'ip',
      sorter: true,
      width: 150,
    },
    {
      title: '国家',
      sorter: true,
      dataIndex: 'ipCountry',
    },
    {
      title: '地区',
      sorter: true,
      dataIndex: 'ipRegion',
    },
    {
      title: '网络',
      sorter: true,
      dataIndex: 'ipNetwork',
    },
  ];

  return (
    <DrawerForm
      open={visible}
      // initialValues={dataSource}
      title='获取IP地理信息'
      formRef={formRef}
      autoFocusFirstInput
      width={1000}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="ips" label="IP列表　[ 一行一个IP ]" fieldProps={{rows:20}} />
        </Col>
        <Col span={24}>
        <ProTable<API.VpnServerOnlineIp>
        rowKey="serverId"
        actionRef={actionRef}
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        search={false}
        toolBarRender={() => {
          var toolbarDoms: any[] = [];
            toolbarDoms.push([
              <Button
                type="primary"
                key="vpnserver_blockediplist"
                onClick={() => {
                  actionRef.current.reload();
                }}
              >
                获取IP地理信息
              </Button>,
            ]);
          return toolbarDoms;
        }}
        pagination={{
          defaultPageSize: 100,
          pageSizeOptions: [
            '100',
            '200',
            '300',
            '500',
            '1000',
            '2000',
            '5000',
            '10000',
          ],
          hideOnSinglePage: false,
        }}
        columns={columns}
        expandable={undefined}
        request={loadData}
      />
        </Col>
      </Row>

    </DrawerForm>
  );
};

export default VpnServerForm;
